<template>
  <div>
    <div style="padding-top: 55px"/>
    <div
        class="album py-5 bg-light"
        style="overflow: auto; height: calc(100vh - 55px)"
    >
      <div class="container">
        <h2 class="text-center">撤消</h2>
        <p class="text-center">
         合计 <strong>{{ undos.length }}</strong> 项目可以撤消。
        </p>

        <div class="row justify-content-md-center">
          <div
              class="col-md-auto btn-group"
              role="group"
              style="padding-bottom: 20px"
          >
            <button type="button" class="btn btn-success disabled">
           全部撤消
            </button>
            <button type="button" class="btn btn-danger disabled">
           全部删除
            </button>
            <button type="button" class="btn btn-secondary" @click="updatePage">
              刷新
            </button>
          </div>
        </div>

        <div class="row justify-content-md-center" style="padding-bottom: 10px">
          <div class="col-md-2 text-right">
            <span>实例类型</span>
          </div>
          <div class="col-md-2">
            <select v-model="type" class="form-control form-control-sm">
              <option value="all">所有</option>
              <option value="annotation">注解</option>
              <option value="category">类别</option>
              <option value="dataset">数据集</option>
            </select>
          </div>
          <div class="col-md-2 text-right">
            <span>页大小</span>
          </div>
          <div class="col-md-2">
            <select
                v-model="limit"
                class="form-control form-control-sm text-inline"
            >
              <option>50</option>
              <option>100</option>
              <option>500</option>
              <option>1000</option>
            </select>
          </div>
        </div>

        <p class="text-center" v-if="undos.length < 1">没有什么可撤消的!</p>
        <div v-else>
          <table class="table table-hover table-sm">
            <thead class="remove-top-border">
            <tr>
              <th scope="col">日期</th>
              <th scope="col">实例类型</th>
              <th scope="col">ID</th>
              <th scope="col">名称</th>
              <th class="text-center" scope="col">回滚</th>
              <th class="text-center" scope="col">删除</th>
            </tr>
            </thead>

            <tbody>
            <tr v-for="(undo, index) in undos" :key="index">
              <td>
                {{ undo.ago.length > 0 ? undo.ago : 0 + " 秒" }} 之前
              </td>
              <td>{{ undo.instance }}</td>
              <td>{{ undo.id }}</td>
              <td>{{ undo.name }}</td>
              <td>
                <i
                    class="fa fa-undo text-center undo-icon"
                    aria-hidden="true"
                    @click="undoModel(undo.id, undo.instance)"
                />
              </td>
              <td>
                <i
                    class="fa fa-remove text-center delete-icon"
                    aria-hidden="true"
                    @click="deleteModel(undo.id, undo.instance)"
                />
              </td>
            </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Undo from "@/models/undos";

import { mapMutations } from "vuex";

export default {
  name: "Undo",
  data() {
    return {
      undos: [],
      limit: 50,
      type: "all"
    };
  },
  methods: {
    ...mapMutations(["addProcess", "removeProcess"]),
    updatePage() {
      let process = "加载撤消" + this.type + "实例类型";
      this.addProcess(process);

      Undo.all(this.limit, this.type)
        .then(response => {
          this.undos = response.data;
        })
        .finally(() => this.removeProcess(process));
    },
    undoModel(id, instance) {
      Undo.undo(id, instance).then(this.updatePage);
    },
    deleteModel(id, instance) {
      Undo.delete(id, instance).then(this.updatePage);
    }
  },
  watch: {
    limit: "updatePage",
    type: "updatePage"
  },
  created() {
    this.updatePage();
  }
};
</script>

<style scoped>
.remove-top-border {
  border: none !important;
}

.fa {
  margin: 0;
  padding: 2px;
}

.undo-icon:hover {
  color: green;
}

.delete-icon:hover {
  color: red;
}
</style>
